<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.js"></script>
<script type="text/javascript">
  $(function() {
    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
    var galleries = $('.ad-gallery').adGallery({
	 loader_image: '01.gif', 
	 start_at_index: 0,     //默认选中图片,0开始     
	 thumb_opacity: 0.7,      //小图模糊滤镜效果   
	 animate_first_image: false, //第一张图片是否效果加载   
	 animation_speed: 400,       //动画切换时间   
	 width: false,               //宽定义   
	 height: false,              //高定义   
	 display_next_and_prev: true,//显示上下页(大图)   
	 display_back_and_forward: true,//显示上下页(小图)   
	 scroll_jump: 0, // If 0, it jumps the width of the container   
	 animated_scroll: true,  //是否连续播放/滚动   
	 slideshow: {     
	 enable: true,     //是否显示播放/暂停     
	 autostart: false, //是否载入即播放     
	 speed: 5000,      //播放时间间隔     
	 start_label: 'Start',//播放文字     
	 stop_label: 'Stop',  //暂停文字     
	 stop_on_scroll: true,     
	 countdown_prefix: '(',     
	 countdown_sufix: ')'   
	 },   
	 effect: 'slide-hori', // 切换效果 'slide-vert', 'fade', or 'resize', 'none', false   
	 enable_keyboard_move: false,   
	 cycle: true,   
	 callbacks: {     
	 init: false,     
	 afterImageVisible: false,     
	 beforeImageVisible: false,     
	 slideShowStart: false,     
	 slideShowStop: false   
	 }  
	 });
    $('#toggle-slideshow').click(
      function() {
        galleries[0].toggleSlideshow();
        return false;
      }
    );
  });
</script>
 
<style type="text/css">
#gallery {
padding: 30px;
background: #e1eef5;
}
</style>
</head>

<body>

<div id="container">
    <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
 
 
      <div class="ad-nav">
        <div class="ad-thumbs">
 
          <ul>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="" longdesc="" class="image0">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  class="image1">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100" title="A title for 11.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 12.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 13.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 14.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 2.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 3.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 4.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 5.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9">
              </a>
            </li>
            <li>
              <a href="img/1.jpg">
                <img src="img/1.jpg" width="100" height="100"  title="A title for 6.jpg" longdesc="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10">
              </a>
            </li>
          </ul>
 
        </div>
      </div>
 
    </div>
    <p>
	<a href="#" id="toggle-slideshow">Toggle slideshow</a>
    </p>
  </div>


</body>
</html>
